<template>
  <div class="container-item-random">
    <div class="random">
      <div class="randomTitle">随便看看</div>
      <div class="trade" @click="getHot">
        <span>换一组</span>
        <span class="iconfont icon-shuaxin"></span>
      </div>
    </div>
    <div class="randomList">
      <div class="menuList" v-for="(temp,index) in hotList" :key="index" @click="checked(temp)">
        <div class="menuPic">
          <el-image class="menuPic" :src="transfromCover(temp.poster)" fit="cover" />
        </div>
        <div class="menuBtn">
          <div>{{temp.title}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// api
import { searchHot } from "@/api/miva";
export default {
  data() {
    return {
      hotList: []
    };
  },
  async mounted() {
    await this.getHot();
  },
  methods: {
    checked(value) {
      // this.show = true;
      // this.nowCheck = value;
      const obj = {
        1: "html5",
        2: "longPic",
        3: "poster",
        4: "video"
      };
      console.log(value);
      if (value.type < 5) {
        this.$store.commit("SETTING_MASK", {
          type: obj[value.type],
          data: value
        });
      } else {
        console.log("这是专题");
        this.$router.push({ name: "details", params: { value } });
      }
    },
    transfromCover(value) {
      if (value instanceof Array) {
        return value;
      }
      return value ? value.split(",")[0] : [];
    },
    async getHot() {
      const res = await searchHot();
      this.hotList = res.data;
    }
  }
};
</script>

<style lang="less">
.container-item-random {
  width: 1200px;
}
.random {
  color: #606060;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .randomTitle {
    font-size: 24px;
  }
  .trade span {
    padding-left: 5px;
    font-size: 16px;
  }
}
.randomList {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 40px;
  position: relative;
  .menuList {
    width: 270px;
    height: 190px;
    position: relative;
    &::after {
      content: "";
      display: block;
      width: 0px;
      height: 3px;
      transition: all .8s;
      position: absolute;
      bottom: -10px;
      z-index: 3;
      background-color: #e44f50;
    }
    &:hover {
      &::after {
        width: 100%;
      }
    }
    .menuPic {
      height: 190px;
      width: 100%;
      overflow: hidden;
      // border:1px solid #272756;
      background: #fafafa;
    }
    .menuBtn {
      padding: 20px 0;
      color: #444444;
      font-size: 18px;
    }
  }
}
</style>